import React, { Component, Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import Upload from './../../components/Upload';
import Buttons from './../../components/Buttons';
import { Checkbox,Empty } from 'antd';
import { AppstoreOutlined, MenuOutlined } from '@ant-design/icons';
import axios from './../../axios';
import FileList from './../../components/FileList';
import FileListThumb from './../../components/FileListThumb';
import { connect } from 'react-redux';
import store from './../../store';
import './index.less';

let linshi = ""
class Whole extends Component {
	
	constructor(props){
		super(props);
		this.state = {
			requestParams: {//请求列表数据的参数
				type: 2
			},
			pid: 0,//当前所在目录层级
			filelist: [],//文件列表
			res: false,
			checkedArr: [],//选中项
			showCheckboxAll: false,//全选checkbox框
			view_mode: "list",//列表显示或矩阵显示
			isCreateFolder: false,//新建文件夹状态
		};
	}
	
	componentWillUnmount(){
		this.unsubscribe();
	}
	
	componentDidMount(){
		this.unsubscribe = store.subscribe(this.handleStoreChange);
		this.requestList(this.state.requestParams);
		const view_mode = localStorage.getItem("jqmkj_pic_view_mode");
		if(view_mode){
			this.setState({view_mode});
		}
	}
	
	//切换列表显示或矩阵显示
	changeViewMode = (view_mode) => {
		this.setState({view_mode});
		localStorage.setItem("jqmkj_pic_view_mode", view_mode);
	}
	
	//全局搜索
	handleStoreChange = () => {
		const value = store.getState().searchValue;
		if(value){
			if(linshi === value){
				return
			}else{
				linshi = value
				axios.get({
					url: "/files/page/search", 
					method: "get",
					params: {search: value, type: 2},
				}).then(res=>{
					if(res.code === 0 && res.result.list){
						let resData = res.result.list.map((item, index)=>{
							let checked = false;
							return {...item, checked}
						})
						this.setState({
							filelist: resData,
							count: res.result.pagination.count,
							checkedArr: []
						})
					}
				})
			}
			
		}
	}
	
	//刷新列表
	refreshList = () => {
		setTimeout(()=>{
			this.requestList(this.state.requestParams);
		},1000)
	}
	
	//获取文件列表
	requestList = (data) => {
		axios.get({
			url: "/files/page/sort", 
			method: "get",
			params: data,
		}).then(res=>{
			if(res.code === 0 && res.result.list){
				let resData = res.result.list.map((item, index)=>{
					let checked = false;
					return {...item, checked}
				})
				this.setState({
					filelist: resData,
					count: res.result.pagination.count,
					checkedArr: [],
					res: true
				})
			}
		}).catch(err=>{
		})
	}
	
	checkedClick = (checkedArr) => {
		this.setState({
			checkedArr
		})
	}
	
	//点击全选checkbox框
	clickCheckboxAll = e => {
		this.props.checkboxAll(e.target.checked);
	}
	
	render(){
		const hasSelectedLength = this.state.checkedArr.length;
		const { showCheckboxAll } = this.state;
		return (
			<div className="page-wrap">
				<div className="page-header">
					{
						hasSelectedLength > 0 ? <Buttons checkedArr={this.state.checkedArr} /> :
						<div className="upload-wrap">
							<Upload refreshList={this.refreshList} />
						</div>
					}
					<div className="change-show">
						{this.state.view_mode === "list" ? 
							<AppstoreOutlined
								className={this.state.view_mode === "thumb" ? "active" : ""}
								onClick={()=>this.changeViewMode("thumb")}
							/>:
							<MenuOutlined 
								className={this.state.view_mode === "list" ? "active" : ""}
								onClick={()=>this.changeViewMode("list")} 
							/>
						}
					</div>
				</div>
				<div className="page-content">
					{ 
						hasSelectedLength > 0 ?
						<div className="selected-num">
							已选择{hasSelectedLength} 项
						</div> : ""
					}
					{
						this.state.filelist.length > 0 || this.state.isCreateFolder? 
						<div
							className="line-header"
							onMouseEnter={()=>this.setState({showCheckboxAll:true})}
							onMouseLeave={()=>this.setState({showCheckboxAll:false})}
						>
							{   (hasSelectedLength > 0 || showCheckboxAll) ?
								<div className="checkboxall-wrap">
									<Checkbox onClick={(e)=>this.clickCheckboxAll(e)} />
								</div>:""
							}
							<div className="border-bottom">
								<span>文件名</span>
								{this.state.view_mode === "list" ? 
									<Fragment>
										<span className="w200 float-right">上次修改时间</span>
										<span className="w200 float-right">大小</span>
									</Fragment>:""
								}
							</div>
						</div>:""
					}
					{
						this.state.filelist.length > 0 ? 
						<div className="file-wrap">
							{ 
								this.state.view_mode === "list" ? 
								<FileList
									history = {this.props.history}
									filelist={this.state.filelist}
									folderClick={this.folderClick}
									refreshList={this.refreshList}
									checkedClick={this.checkedClick}
									contextMenuType=""
								/>:
								<FileListThumb
									history = {this.props.history}
									filelist={this.state.filelist}
									folderClick={this.folderClick}
									refreshList={this.refreshList}
									checkedClick={this.checkedClick}
									contextMenuType=""
								/>
							}
							<p style={{textAlign: "center", clear: "both"}}>共{this.state.count}项</p>
						</div>
						: this.state.isCreateFolder? "": this.state.res?
						<div className="empty-page">
							<div>
								<Empty description='暂无数据'/>
							</div>
						</div>:""
					}
				</div>
			</div>
		)
	}
}

const mapState = (state) => {
	return {
		searchValue: state.searchValue
	}
}

const mapDispatch = (dispatch) => {
	return {
		checkboxAll(isCheckedAll){
			dispatch({
				type: "CHECKBOX_ALL",
				isCheckedAll
			})
		}
	}
}

export default connect(mapState, mapDispatch)(withRouter(Whole));